<template>
  <el-dialog
    title="填物流信息"
    :visible.sync="dialog"
    :before-close="handleClose"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form
      :model="stockExpressForm"
      label-width="100px"
      ref="stockExpressForm"
    >
      <div
        v-for="(itemForm,index) in stockExpressForm.express"
        :key="index"
      >
        <div>
          <span>物流信息{{index+1}}</span>
          <hr>
        </div>
        <el-form-item label="物流类型">
          <el-radio-group v-model="itemForm.type">
            <el-radio :label="1">快递单</el-radio>
            <el-radio :label="2">1688订单</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="itemForm.type === 1">
          <el-form-item
            label="选择快递"
            :rules="rules.deliveryType"
            :prop="'express.' + index + '.deliveryType'"
          >
            <el-select v-model="itemForm.deliveryType" placeholder="请选择" filterable>
              <el-option-group
                v-for="group in expressGroupOptions"
                :key="group.label"
                :label="group.label">
                <el-option
                  v-for="item in group.options"
                  :key="item.value"
                  :label="item.company_name"
                  :value="item.type">
                </el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item
            label="快递单号"
            :prop="'express.' + index + '.deliveryNo'"
            :rules="rules.deliveryNo"
          >
            <el-input v-model="itemForm.deliveryNo" placeholder="请填写快递单号"></el-input>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item
            label="订单号"
            :rules="rules.order1688"
            :prop="'express.' + index + '.order1688'"
          >
            <el-input
              v-model.trim="itemForm.order1688"
              maxlength="19"
              show-word-limit
            ></el-input>
          </el-form-item>
        </template>
        <el-form-item label="">
          <el-button type="danger" @click="delExpress(index)" v-if="stockExpressForm.express.length > 1">删除</el-button>
        </el-form-item>
      </div>
      <el-form-item label="">
        <div class="plus-express-item" @click="addExpress">
          <i class="el-icon-plus" style="margin-right: 5px"></i>
          <span>新增物流信息</span>
        </div>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submitForm" :loading="loading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import expressCompanyMixin from "@/views/order/mixin/expressCompany";
import {saveStockOrderExpress} from "@/api/stock";
import {deepCopy} from "@/utils";

export default {
  name: "stockExpressDialog",
  mixins: [expressCompanyMixin],
  props: {
    dialog:{
      type: Boolean,
      default: false,
    },
    stockExpressForm:{
      type: Object,
      required: true,
    }
  },
  data(){
    return {
      loading: false,
      rules:{
        deliveryType: [
          { required: true, message: '请选择快递', trigger: 'change' }
        ],
        deliveryNo: [
          { required: true, message: '请填写快递单号', trigger: 'blur' }
        ],
        order1688:[
          { required: true, message: '请填写1688订单号', trigger: 'blur' },
          { pattern: /^[0-9]+$/, message: '1688订单号格式有误'},
        ],
      },
    }
  },
  methods:{
    addExpress(){
      this.stockExpressForm.express.push({
        type: 1,
        order1688: '',
        deliveryType: '',
        deliveryNo: '',
      })
    },
    delExpress(index){
      this.stockExpressForm.express.splice(index,1)
    },
    handleClose() {
      this.$emit('closeDialog', false)
    },
    submitForm(){
      this.$refs.stockExpressForm.validate(valid =>{
        if(valid){
          if(!this.stockExpressForm.stockId){
            this.$emit('changeExpress',true); // 向父组件发送一个时间 告知改变了库存
            this.handleClose()
            return;
          }
          if(this.stockExpressForm.express.length === 0){
            this.$errorMessage('请至少填写一个物流信息');
            return;
          }
          const postData = deepCopy(this.stockExpressForm)
          this.loading = true
          saveStockOrderExpress(postData)
            .then(res=>{
              this.loading = false;
              if(res.error === 0){
                this.$successMessage(res.message)
                this.$emit('changeExpress',true); // 向父组件发送一个时间 告知改变了库存
                this.handleClose()
              }else{
                this.$errorMessage(res.message)
              }
            })
        }
      })

    }
  }
}
</script>

<style scoped lang="scss">
.plus-express-item{
  width: 120px;
  border: 1px dashed #0890FF;
  text-align: center;
  color: #0890FF;
  //font-weight: 300;
  font-size: 12px;
  cursor: pointer;
}
</style>
